﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Ditto.Models.Comments>" %>

<div id="comments">
<h3>Comments (<%: Model.Count().ToString() %>)</h3>

<% Html.RenderAction("New", "Comments", new { type = Model.Type, subjectID = Model.SubjectID } ); %>

<ul style="margin-top:7px">
<% foreach (var c in Model)
   {%>
       <li class="summary">
            <div class="image" style="float:left">
                <a href="/Users/Details/<%= c.By %>"><img class="resized" alt="<%= c.By %>" src="/Content/users/<%= c.By %>-small.jpg" /></a>
            </div>

            <div class="removecomment" style="float:right">
            <% if (c.IsPostedBy(Context.User.Identity.Name)) { %>
                <%: Html.ActionLink("remove", "Delete", "Comments", new { id = c.ID, type = c.Type }, null) %>
            <% }%>
            </div>

            <% if (c.Rating != null)
               { %>
                <div class="stars-comment">
                <%: Html.Hidden("Rating", c.Rating)%>
                </div>
            <%} %>

            <div>
                <strong><%: c.By %>:</strong>
            </div>
            <p>
                <%: c.Message %>
            </p>
            <div style="text-align:right">
                <i> at <%: c.Time %> </i>
            </div>
       </li>
   <%} %>

</ul>
</div>

<script src="/Scripts/jquery.myimgscale-0.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("img.resized").scaleImage({
            parent: '.image',
            center: false,
            fade: 500
        });
    });
</script>

<script type="text/javascript">
    $("#postcomment").click(function () {
        var message = $("#Message").val();
        $.post($("#comments form").attr("action"), "message=" + message, function (response) {
            $("#comments").replaceWith(response);
        });
        return false;
    });
</script>

<script type="text/javascript">
    $(".removecomment a").click(function () {
        var t = this;
        $.get($(this).attr("href"), function (response) {
            $(t).parent().parent().replaceWith(response)
        });
        return false;
    });
</script>

<script type="text/javascript" src="/Scripts/raty/jquery.raty.js"></script>
<script type="text/javascript">
    $('.stars-comment').raty({
        readOnly: true,
        half: true,
        target: '#Rating',
        targetType: 'number'
    });
</script>